<template>
	<!-- 盒子 -->
	<div class="box">
		<!-- 设置透明 -->
		<div class="counselingtraining">
			<!-- 头部样式 -->
			<div class="headtit">
				<img src="../../assets/image/形状 1.png" alt="" class="one" />
				<div class="framebox">
					<div class="frame">辅导培训</div>
					<div class="frame2"></div>
				</div>

				<img src="../../assets/image/形状 1.png" alt="" class="two" />
			</div>
			<!-- 内容盒子 -->
			<div class="content">
				<!-- 头部导航 -->
				<div class="daotit">
					<div class="gang"></div>
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" text-color="#fff" active-text-color="#fff"
					 background-color="#F39E2B" @select="handleSelect">
						<el-menu-item :index="index.toString()" v-for="(item, index) in daolists" :key="index">
							{{ item }}
							<div class="sanjiao"></div>
						</el-menu-item>
					</el-menu>
					<span>更多+</span>
				</div>
				<div class="botinner" v-if="btntit">
					<div class="botinner_le">
                        <!-- <img src="../../assets/image/bofang.png" alt="" class="play"> -->
						<el-carousel indicator-position="outside" @change='select' ref='carousel'>
							<!-- 循环数据即可 -->
							<el-carousel-item v-for="(item, index) in 4" :key="index">
								<img src="../../assets/image/矩形 11 拷贝 2.png" alt="" />
								
							</el-carousel-item>
							<div class="imgfov">
								<ul ref='suoyin'>
									<li @click="switchover(0)" class='quanquan'>01</li>
									<li @click="switchover(1)" class='quan'>02</li>
									<li @click="switchover(2)" class='quan'>03</li>
									<li @click="switchover(3)" class='quan'>04</li>
								</ul>
							</div>
						</el-carousel>
						<!-- 下面的盒子 -->
						<div class="whibot">
							<p>七岁男孩滑板玩出了新花样</p>
							<span>时长：2分42秒</span>
						</div>
					</div>
					<div class="botinner_ri">
						<div class="biboxin" v-for="item in 4" :key="item">
                            <img src="../../assets/image/图层 625.png" alt="" class="plays">
							<img src="../../assets/image/矩形 10 拷贝 3.png" alt="" />
							<p>身残志坚却用舞蹈跳出人生</p>
							<span>时长：2分42秒</span>
						</div>
					</div>
				</div>
				<!-- //师资介绍 -->
				<div class="botinnera" v-else>
					<!-- 循环 -->
						<div class="datumfor"  v-for="item in 8" :key="item">
                            <img src="../../assets/image/图层 625.png" alt="" class="plays">
							<img src="../../assets/image/矩形 10 拷贝 10.png" alt="">
							<div class="inbot">
								<p class="tex">大爷每天坚持唱歌</p>
                                <p class="tit">时长：2分42秒</p>
							</div>
						</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Bright",
		data() {
			return {
				btntit:true,
				//导航刷新位置
				activeIndex: "0",
				//导航内容
				daolists: ["热门", "音乐", "舞蹈", "书画", "摄影"],
			};
		},
		methods: {
			// 导航事件
			handleSelect(key, keyPath) {
				if(key==1){
					this.btntit=false;
				}else if(key==0){
					this.btntit=true;
				}
				console.log(key, keyPath);
			},
			select(id){
				for(var i=0;i<this.$refs.suoyin.children.length;i++){
					// if(this.$refs.suoyin.children[i].className == '')
					this.$refs.suoyin.children[i].className  = 'quan';
				}
				this.$refs.suoyin.children[id].className  = 'quanquan';
				
			},
			switchover(index){
				this.$refs.carousel.setActiveItem(index)
			}
		},
	};
</script>
<style scoped lang="less">
	.box {
		width: 100%;
		height: 855px;
		background-image: url("../../assets/image/矩形 543.png");

		.counselingtraining {
			width: 100%;
			height: 855px;
			//避免opacity继承
			background-color: rgba(243, 158, 43, 0.85);

			.headtit {
				width: 100%;
				height: 100px;

				.one {
					width: 44.29%;
					position: relative;
					top: 89px;
				}

				.two {
					width: 44.78%;
					position: absolute;
					right: 0;
					margin-top: -80px;
				}

				.framebox {
					margin: 28px auto;
					width: 10.94%;
					height: 80px;

					.frame {
						font-size: 1.56vw;
						color: white;
						text-align: center;
						line-height: 75px;
						margin-top: 3px;
						margin-left: -5px;
						position: absolute;
						width: 10.57%;
						height: 75px;
						border: 1px solid #ffffff;
						border-radius: 13px;
					}

					.frame2 {
						float: left;
						width: 96.66%;
						height: 75px;
						border: 1px solid #ffffff;
						border-radius: 13px;
					}
				}
			}

			.content {
				position: relative;
				margin: 0 auto;
				margin-top: 89px;
				width: 72.9%;
				height: 597px;
				background-color: #f39e2b;

				.daotit {
					width: 100%;

					.gang {
						z-index: 99;
						position: absolute;
						width: 100%;
						border-bottom: 1px solid white;
						margin-top: 60px;
					}

					span {
						position: absolute;
						right: 15px;
						margin-top: -20px;
						color: #e9e9e9;
					}
				}

				.botinner {
					display: flex;
					flex-wrap:wrap;
					width: 100%;
					height: 87.43%;
					margin-top: 25px;
					justify-content:space-between;
					.botinner_le {
						float: left;
						width: 50.5%;
						height: 100%;
                        .play{
                            width: 9.28%;
                            height: 21.56%;
                            position: absolute;
                            z-index: 9;
                            left: 20%;
                            top: 43.5%;

                        }
						.el-carousel {
							width: 100%;
							height: 100%;

							.el-carousel__container {
								position: none;
							}
						}

						.imgfov {
							position: absolute;
							z-index: 99;
							float: right;
							right: 0;
							bottom: -6%;
							width: 20.13%;

							ul {
								width: 100%;
								.quan {
									text-align: center;
									font-size: 0.572vw;
									width: 13.53%;
									height: 20px;
									margin-left: 8.025%;
									float: left;
									background-image: url(../../assets/image/quan.png);
								}
								.quanquan{
									text-align: center;
									font-size: 0.572vw;
									width: 13.53%;
									height: 20px;
									margin-left: 8.025%;
									float: left;
									background-image: url(../../assets/image/quanquan.png);
								}
							}
						}

						img {
							width: 100%;
							height: 480px;
						}

						.whibot {
							width: 30%;
							position: absolute;
							bottom: 10px;
							left: 18px;

							p {
								color: white;
								font-size: 0.729vw;
								float: left;
							}

							span {
								color: white;
								font-size: 0.729vw;
								float: right;
							}
						}
					}

					.botinner_ri {
						// float: right;
						width: 48.071%;
						height: 100%;

						.biboxin {
                            position: relative;
							float: left;
							margin-bottom: 2.58%;
							width: 48.12%;
							height: 48.36%;
                            .plays{
                                width: 16.56%;
                                height: 21.03%;
                                position: absolute;
                                z-index: 9;
                                left: 41%;
                                top:32%;
                            }
							img {
								width: 100%;
								height: 84.12%;
							}

							p {
								margin-top: 5px;
								margin-left: 5px;
								color: white;
								font-size: 0.729vw;
								float: left;
							}

							span {
								margin-top: 5px;
								color: white;
								font-size: 0.729vw;
								float: right;
								margin-right: 3%;
							}
						}
					}
					
					
				}
				.botinnera{
					display: flex;
					flex-wrap:wrap;
					width: 100%;
					height: 87.43%;
					margin-top: 25px;
					justify-content:space-between;
					align-content:space-around;
					//音乐
					.datumfor{
                        position: relative;
						// display: flex;
						width: 23.232%;
						height: 49.458%;
						img{
							width: 100%;
							height: 80%;
						}
                        .plays{
                            width: 16.45%;
                            height: 20.5%;
                            position: absolute;
                            top: 30%;
                            left: 40%;
                        }
                        .inbot{
                            display: flex;
						    justify-content: space-between;
                            width: 100%;
                            height: 30px;
                            // background-color: red;
                            color: white;
                            margin-top: 5px;
                            
                        }
						
					}
				}
			}
		}
	}
</style>
<style>
	.content .daotit .el-menu-item {
		font-size: 0.9375vw;
	}
	
	
	.content .daotit{
		position: relative;
	}
	.content .daotit .el-menu-item.is-active {
		border: none;
		font-size: 1.25vw;
		
	}
	.content .daotit .el-menu-item.is-active .sanjiao{
		position: absolute;
		top: 100%;
		left: 45%;
		display: inline-block;
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 10px solid #ffffff;
	}
	.botinner_le .el-carousel__container {
		height: 480px;
	}

	.botinner_le .el-carousel__indicators {
		text-align: right;
		margin-top: 23px;
		margin-right: 15px;
	}

	.botinner_le .el-carousel__indicators .el-carousel__indicator {
		padding: 0;
	}

	.botinner_le .el-carousel__indicators--outside button {
		background-color: white;
	}

	.biboxin:nth-child(2n) {
		margin-left: 3.723%;
	}

	.content .daotit .el-menu-demo {
		border: none;
		margin-left: 14%;
		width: 80%;
	}

	.content .daotit .el-menu-demo .el-menu-item {
		margin-top: 15px;
		width: 15%;
		height: 35px;
		line-height: 35px;
		text-align: center;
		border-right: 1px solid;
	}

	.content .daotit .el-menu-item {
		margin-left: 0;
	}

	.content .daotit .el-menu-demo .el-menu-item:nth-child(5) {
		border-right: none;
	}
	.botinner_le .el-carousel__indicators--outside{
		width: 17%;
    	float: right;
    	margin-right: 12px;

	}
	.botinner_le .el-carousel__indicators--outside .el-carousel__indicator{
		width: 25%;
	}
	.botinner_le .el-carousel__indicators--outside .el-carousel__indicator button{
		width: 100%;
	}
</style>
